<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购物车</title>
  <link rel="stylesheet" href="/css/cartpage.css">
</head>
<body>
  <div class="shortcut"></div>
  <header class="header">
    <div class="layout">
      <div class="left f-l">
        <div class="logo">
          <a href="/" title="华为商城">
            <img src="/images/shortLogo.png" alt="">
          </a>
        </div>

        <span>我的购物车</span>
      </div>
      <div class="right f-r">
        <div class="progress-area">
        </div>
      </div>
    </div>
  </header>

  <div class="sc">
    <div class="layout">

      <div class="sc-empty">
        <span class="icon-empty-cart"></span>
        <p>您的购物车里什么也没有哦~</p>
        <a href="/">去逛逛</a>
      </div>

      <!--有内容的购物车-->
      <div class="sc-has">
        <div class="sc-title clearfix">
          <label class="checkbox product-select-all">
            <input class="">
            全选
          </label>
          <ul class="clearfix">
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
          </ul>
        </div>

        <div class="cart-list">


        </div>

        <!--工具栏-->
        <div class="sc-tools clearfix">
          <div class="sc-tools-control">
            <label class="checkbox product-select-all">
              <input class="">
              全选
            </label>

            <a href="javascript:void (0);" class="del-all">删除</a>
          </div>

          <div class="sc-tools-btn">
            <a href="avascript:void (0);">立即结算</a>
          </div>

          <div class="sc-tools-price">

          </div>
        </div>
      </div>
      <!--/.有内容的购物车-->
    </div>
  </div>


  <footer class="footer"></footer>

  <script src="/libs/require/require.js" data-main="js/cart"></script>

  <!--模版区域-->
  <script type="text/html" id="shopTemplate">

    {{ each cart product }}
    <!--商品-->
    <div class="sc-list clearfix" data-index="{{ $index }}">
      <div class="sc-item clearfix">
        <label class="checkbox product-select">
          <input class="{{ if product.selected }}checked{{ /if }}">
        </label>

        <!--商品数据-->
        <div class="sc-item-area">
          <div class="sc-item-main clearfix">
            <a href="{{ product.href }}" class="p-img">
              <img src="{{ product.imgSrc }}" alt="{{ product.name }}" title="{{ product.name }}">
            </a>

            <ul>
              <li>
                <a href="{{ product.href }}" class="p-name" title="{{ product.name }}">{{ product.name }}</a>
                <p class="p-info">{{ product.version }} {{ product.bundlePackage.name }}</p>
              </li>
              <li>
                <div class="p-price">
                  <span>¥&nbsp;{{ product.price.toFixed(2) }}</span>
                  {{ if product.sale}}
                  <s>¥&nbsp;{{ product.originPrice.toFixed(2) }}</s>
                  {{ /if }}
                  <a href="javascript:void (0)" class="btn-discount">优惠券&nbsp;></a>
                </div>
              </li>

              <li>
                <div class="p-stock">
                  <input type="number" class="p-stock-text" placeholder="1" value="{{ product.num }}">
                  <div class="p-stock-btn">
                    <a href="javascript:void (0);" class="{{ if product.num <= 1}}disabled{{ /if }} minNum">-</a>
                    <a href="javascript:void (0);" class="addNum">+</a>
                  </div>
                </div>
              </li>

              <li>
                <span class="p-price-total">¥&nbsp;{{ (product.price*product.num).toFixed(2) }}</span>
                {{ if product.sale}}
                <span class="p-price-save">¥&nbsp;{{ (product.sale*product.num).toFixed(2) }}</span>
                {{ /if }}
              </li>

              <li>
                <a href="javascript:void (0);" class="p-del">删除</a>
              </li>
            </ul>
          </div>

          {{ if product.service.length !== 0}}

          <div class="p-service-main clearfix">
            <div class="p-service-info">
              <label class="checkbox f-l service-select">
                <input>
              </label>
              <div class="service-name">
                <i>优惠</i>
                <span>碎屏(含后盖)服务宝1年</span>
              </div>

              <div class="service-price">
                <span>¥479.20</span>
                <s>¥599.00</s>
              </div>

            </div>
            <div class="p-service-link">
              <a href="javascript:void(0)">了解详情</a>
            </div>
          </div>

          <div class="p-service-main clearfix">
            <div class="p-service-info">
              <label class="checkbox f-l service-select">
                <input>
              </label>
              <div class="service-name">
                <i>优惠</i>
                <span>延长服务宝1年</span>
              </div>

              <div class="service-price">
                <span>¥294.40</span>
                <s>¥368.00</s>
              </div>

            </div>
            <div class="p-service-link">
              <a href="javascript:void(0)">了解详情</a>
            </div>
          </div>

          {{ /if }}

        </div>
        <!--/.商品数据-->
      </div>
    </div>

    {{ /each }}
  </script>

  <script type="text/html" id="totalTemplate">
    <p>
      <label>总计</label>
      <span>¥&nbsp;{{ price.toFixed(2)}}</span>
      <em>
        <b>不含运费</b>
      </em>
    </p>

    <div class="total-choose">
      已选择 <em>{{ num }}</em>件商品，优惠： <span>¥ {{ sale.toFixed(2) }}</span>
    </div>
  </script>

</body>
</html>
